/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* CSS Variables specific to this panel that aren't defined by the themes */
:root {
  --rule-highlight-background-color: var(--theme-highlight-yellow);
  --rule-header-background-color: var(--theme-toolbar-background);
  --rule-pseudo-class-text-color: var(--yellow-70) ;
  --rule-unused-name-text-color: var(--grey-50);
  --rule-unused-value-text-color: var(--grey-45);
  --rule-overridden-name-text-color: var(--grey-50);
  --rule-overridden-value-text-color: var(--grey-45);
}

:root.theme-dark {
  --rule-highlight-background-color: #521C76;
  --rule-header-background-color: #222225;
  --rule-pseudo-class-text-color: var(--yellow-50);

  --rule-unused-name-text-color: var(--grey-45);
  --rule-unused-value-text-color: #787878;
  --rule-overridden-name-text-color: var(--grey-45);
  --rule-overridden-value-text-color: #787878;
}

/* Rule View Tabpanel */

#sidebar-panel-ruleview {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
     widths */
  min-width: 100px;
}

/* Rule View Toolbar */

#ruleview-toolbar-container {
  line-height: var(--theme-toolbar-height);
}

#ruleview-toolbar {
  flex-wrap: wrap;
  height: auto;
}

#ruleview-toolbar .devtools-searchbox {
  flex-basis: 7em;
  height: var(--theme-toolbar-height);
}

#ruleview-command-toolbar {
  display: flex;
}

.ruleview-reveal-panel {
  border-bottom: 1px solid var(--theme-splitter-color);
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
}

.ruleview-reveal-panel[hidden] {
  display: none;
}

.ruleview-reveal-panel .add-class {
  height: var(--theme-toolbar-height);
  line-height: normal;
}

.ruleview-reveal-panel label {
  user-select: none;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

#pseudo-class-panel,
#ruleview-class-panel .classes {
  padding: 0 3px;
}

/* Class toggle panel */

#ruleview-class-panel {
  flex-direction: column;
}

#ruleview-class-panel .classes {
  border-top: 1px solid var(--theme-splitter-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 100px;
  overflow-y: auto;
}

#ruleview-class-panel .classes label {
  flex: 0 0;
  max-width: 50%;
}

#ruleview-class-panel .classes label span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#ruleview-class-panel .no-classes {
  flex: 1;
  color: var(--theme-text-color-inactive);
  margin: 0;
  text-align: center;
}

/* Rule View Container */

#ruleview-container {
  user-select: text;
  overflow: auto;
  flex: auto;
  height: 100%;
}

/* This extra wrapper only serves as a way to get the content of the view focusable.
   So that when the user reaches it either via keyboard or mouse, we know that the view
   is focused and therefore can handle shortcuts.
   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
   through it, and the outline is hidden. */
#ruleview-container-focusable {
  height: 100%;
  outline: none;
}

#ruleview-container.non-interactive {
  pointer-events: none;
  visibility: collapse;
  transition: visibility 0.25s;
}

#ruleview-container .accordion ._content {
  padding: 0;
}

.ruleview-code {
  direction: ltr;
}

.ruleview-property:not(:hover) > .ruleview-enableproperty {
  pointer-events: none;
}

.ruleview-expandable-container {
  display: block;
}

.ruleview-namecontainer {
  cursor: text;
  margin-left: -15px;
}

.ruleview-computed > .ruleview-namecontainer {
  margin: 0;
}

.ruleview-propertyvaluecontainer {
  cursor: text;
  padding-right: 5px;
}

.ruleview-propertyvaluecontainer a {
  color: var(--theme-highlight-purple);
  cursor: pointer;
}

.ruleview-computedlist,
.ruleview-expandable-container[hidden],
.ruleview-overridden-items[hidden],
.ruleview-overridden-rule-filter[hidden],
.ruleview-warning[hidden],
.ruleview-unused-warning[hidden],
.ruleview-used[hidden],
.ruleview-overridden .ruleview-grid {
  display: none;
}

.ruleview-computedlist[user-open],
.ruleview-computedlist[filter-open],
.ruleview-overridden-items {
  display: block;
}

.ruleview-rule-source {
  text-align: end;
  float: right;
  max-width: 100%;

  /* Force RTL direction to crop the source link at the beginning. */
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;

  user-select: none;
  margin-bottom: 2px;
  margin-left: 1ch;
}

.ruleview-rule-source-label {
  white-space: nowrap;
  margin: 0;
  cursor: pointer;

  /* Create an LTR embed to avoid special characters being shifted to the start due to the
     parent node direction: rtl; */
  direction: ltr;
  unicode-bidi: embed
}

.ruleview-rule-source.disabled > .ruleview-rule-source-label,
.ruleview-rule-source[unselectable] > .ruleview-rule-source-label {
  cursor: default;
}

.ruleview-rule-source:not(.unselectable):hover,
.ruleview-rule-source:not([unselectable]):hover {
  text-decoration: underline;
}

.ruleview-header {
  background: var(--rule-header-background-color);
  border-bottom: 1px solid var(--theme-splitter-color);
  color: var(--theme-toolbar-color);
  font-size: 12px;
  line-height: 16px;
  padding: 4px;
  width: 100%;
  align-items: center;
  display: flex;
  user-select: none;
}

.ruleview-expandable-header {
  cursor: pointer;
}

.ruleview-expandable-header:hover {
  background-color: var(--theme-accordion-header-hover);
}

.ruleview-expandable-header .theme-twisty {
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

.ruleview-rule-pseudo-element {
  padding-left: 20px;
  border-left: solid 10px;
}

.ruleview-rule {
  border-bottom: 1px solid var(--theme-splitter-color);
  padding: 2px 4px;
}

#ruleview-container-focusable > .ruleview-rule:last-child {
  border-bottom: none;
}

/**
 * Display rules that don't match the current selected element and uneditable
 * user agent styles differently
 */
.ruleview-rule.unmatched,
.ruleview-rule.uneditable,
.ruleview-rule[unmatched=true],
.ruleview-rule[uneditable=true] {
  background: var(--theme-tab-toolbar-background);
}

.ruleview-rule.unmatched,
.ruleview-rule[unmatched=true] {
  opacity: 0.5;
}

.ruleview-rule.uneditable :focus,
.ruleview-rule[uneditable=true] :focus {
  outline: none;
}

.ruleview-rule.uneditable .theme-link,
.ruleview-rule[uneditable=true] .theme-link {
  color: var(--theme-highlight-bluegrey);
}

.ruleview-rule.uneditable .ruleview-enableproperty,
.ruleview-rule[uneditable=true] .ruleview-enableproperty {
  visibility: hidden;
}

.ruleview-rule.uneditable .ruleview-swatch,
.ruleview-rule[uneditable=true] .ruleview-swatch {
  cursor: default;
}

.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname,
.ruleview-rule.uneditable .ruleview-propertyvaluecontainer >
.ruleview-propertyvalue,
.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
.ruleview-propertyvalue {
  border-bottom-color: transparent;
}

.ruleview-property.unused .ruleview-propertyname {
  color: var(--rule-unused-name-text-color);
}

.ruleview-property.unused .ruleview-propertyvalue {
  color: var(--rule-unused-value-text-color);
}

.ruleview-overridden-rule-filter {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-start: 3px;
  background-image: url(chrome://devtools/skin/images/filter-small.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  -moz-context-properties: fill;
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-overridden-rule-filter:hover {
  fill: var(--theme-icon-color);
}

.ruleview-ruleopen {
  padding-inline-end: 5px;
}

.ruleview-ruleclose {
  clear: both;
  cursor: text;
  padding-right: 20px;
}

.ruleview-propertylist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ruleview-enableproperty {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}

:root[platform="mac"] .ruleview-enableproperty {
  left: -29px;
  box-sizing: border-box;
  margin-inline-start: 3px;
  margin-inline-end: 9px;
  width: 12px;
  height: 12px;
}

/* The SVG checkbox on Windows and Linux */
:root[platform="win"] .ruleview-enableproperty,
:root[platform="linux"] .ruleview-enableproperty {
  -moz-appearance: none;
  float: left;
  left: -27px;
  box-sizing: content-box;
  margin-inline-start: 0;
  margin-inline-end: 10px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 0;
  padding: 0;
  outline: none;
  background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
  /* Using fill to paint the border, and stroke for the tick */
  -moz-context-properties: fill, stroke;
  fill: rgba(0,0,0,.3);
  stroke: transparent;
}

:root[platform="win"].theme-dark .ruleview-enableproperty,
:root[platform="linux"].theme-dark .ruleview-enableproperty {
  fill: rgba(255,255,255,.4);
}

:root[platform="win"] .ruleview-enableproperty:checked,
:root[platform="linux"] .ruleview-enableproperty:checked {
  stroke: rgba(0,0,0,.6);
}

:root[platform="win"].theme-dark .ruleview-enableproperty:checked,
:root[platform="linux"].theme-dark .ruleview-enableproperty:checked {
  stroke: rgba(255,255,255,.8);
}

:root[platform="mac"] .ruleview-enableproperty {
  -moz-appearance: checkbox;
}

.ruleview-warning,
.ruleview-unused-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-size: 12px;
  background-repeat: no-repeat;
  -moz-context-properties: fill;
}

.ruleview-warning {
  background-image: url(chrome://devtools/skin/images/alert-small.svg);
  fill: var(--yellow-60);
}

.ruleview-unused-warning {
  background-image: url(chrome://devtools/skin/images/info-small.svg);
  background-color: var(--theme-sidebar-background);
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-unused-warning:hover {
  fill: var(--theme-icon-color);
  stroke: var(--theme-icon-color);
}

.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) {
  /* Use opacity to hide the checkbox instead of visibility:hidden,
     so that it's possible to focus it with the keyboard. */
  opacity: 0;
}

.ruleview-expander {
  vertical-align: middle;
}

.ruleview-propertycontainer .ruleview-expander {
  margin-left: -6px;
}

.ruleview-propertycontainer .ruleview-expander:dir(rtl):not([open]) {
  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
  transform: rotate(-90deg);
}

.ruleview-newproperty {
  margin-inline-start: -10px;
}

.ruleview-namecontainer,
.ruleview-propertyvaluecontainer,
.ruleview-propertyname,
.ruleview-propertyvalue {
  text-decoration: inherit;
}

.ruleview-computedlist {
  list-style: none;
  padding: 0;
}

.ruleview-overridden-items {
  list-style: none;
  line-height: 1.5em;
}

.ruleview-overridden-item {
  position: relative;
}

.ruleview-overridden-item::before,
.ruleview-overridden-item::after {
  content: "";
  position: absolute;
  display: block;
  border: 0 solid var(--theme-text-color-alt);
}

.ruleview-overridden-item::before {
  top: 0;
  left: -15px;
  height: 0.8em;
  width: 10px;
  border-left-width: 0.5px;
  border-bottom-width: 0.5px;
}

.ruleview-overridden-item::after {
  left: -15px;
  bottom: -7px;
  height: 100%;
  border-left-width: 0.5px;
}

.ruleview-overridden-item:last-child::after {
  display: none;
}

.ruleview-overridden-item .ruleview-namecontainer {
  margin-left: 0;
}

/* All swatches */

.ruleview-flex,
.ruleview-grid,
.ruleview-shapeswatch,
.ruleview-swatch {
  cursor: pointer;
  width: 1em;
  height: 1em;
  vertical-align: middle;

  /* align the swatch with its value */
  margin-top: -1px;
  margin-inline-end: 5px;
  display: inline-block;
  position: relative;
}

/* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */

.ruleview-flex,
.ruleview-grid,
.ruleview-shapeswatch {
  -moz-context-properties: stroke;
  stroke: var(--theme-icon-color);
}

.ruleview-flex.active,
.ruleview-grid.active,
.ruleview-shapeswatch.active {
  stroke: var(--theme-icon-checked-color);
}

.ruleview-flex {
  background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
  background-size: 13px 11px;
  width: 13px;
  height: 11px;
}

.ruleview-grid {
  background-image: url("chrome://devtools/skin/images/grid.svg");
}

.ruleview-grid[disabled] {
  cursor: default;
  opacity: 0.5;
}

.ruleview-shapeswatch {
  background-image: url("chrome://devtools/skin/images/shape-swatch.svg");
  background-size: 110%;
  width: 1.45em;
  height: 1.45em;
}

.ruleview-shape-point.active,
.ruleview-shapeswatch.active + .ruleview-shape > .ruleview-shape-point:hover {
  background-color: var(--rule-highlight-background-color);
}

/* Round swatches using the .ruleview-swatch class (color, bezier, filter and angle) */

.ruleview-swatch {
  background-size: 1em;
  border-radius: 50%;
}

.ruleview-colorswatch::before {
  content: '';
  background-color: #eee;
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.ruleview-swatch.ruleview-colorswatch {
  border: none;
  padding: 0;
}

.ruleview-bezierswatch {
  background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
}

.ruleview-filterswatch {
  background-image: url("chrome://devtools/skin/images/filter-swatch.svg");
}

.ruleview-angleswatch {
  background-image: url("chrome://devtools/skin/images/angle-swatch.svg");
}

.ruleview-overridden {
  text-decoration: line-through solid var(--theme-text-color-alt);
}

.ruleview-property.ruleview-overridden .ruleview-propertyname {
  color: var(--rule-overridden-name-text-color);
}

.ruleview-property.ruleview-overridden .ruleview-propertyvalue {
  color: var(--rule-overridden-value-text-color);
}

/**
 * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
 * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
 * .ruleview-flex and .ruleview-grid are custom
 */
.ruleview-overridden .ruleview-flex,
.ruleview-overridden .ruleview-grid,
.ruleview-overridden .ruleview-shapeswatch,
.ruleview-overridden .ruleview-swatch {
  display: none;
}

.ruleview-font-family.used-font {
  text-decoration: underline;
}

.styleinspector-propertyeditor {
  border: 1px solid #CCC;
  padding: 0;
  margin: -1px -3px -1px -1px;
}

.ruleview-property {
  border-left: 3px solid transparent;
  clear: both;
  padding-left: 28px;
  overflow-wrap: break-word;
}

.ruleview-propertycontainer  > * {
  vertical-align: middle;
}

.ruleview-property.ruleview-changed,
.ruleview-property[dirty] {
  border-left-color: var(--theme-highlight-green);
}

.ruleview-highlight > .ruleview-expander,
.ruleview-highlight > .ruleview-namecontainer,
.ruleview-highlight > .ruleview-propertyvaluecontainer,
.ruleview-highlight > .ruleview-rule-source-label,
.ruleview-highlight > .ruleview-selector {
  background-color: var(--rule-highlight-background-color);
}

.ruleview-namecontainer > .ruleview-propertyname,
.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
  border-bottom: 1px dashed transparent;
}

.ruleview-namecontainer:hover > .ruleview-propertyname,
.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
  border-bottom-color: hsl(0,0%,50%);
}

.ruleview-selectorcontainer {
  word-wrap: break-word;
  cursor: text;
}

.ruleview-selector-matched {
  background: var(--theme-highlight-yellow);
}

.ruleview-selector-separator,
.ruleview-selector-unmatched,
.ruleview-unmatched-variable {
  color: #888;
}

.ruleview-selector-matched > .ruleview-selector-attribute {
  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
}

.ruleview-selector-matched > .ruleview-selector-pseudo-class {
  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
}

.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
  color: var(--rule-pseudo-class-text-color);
}

.ruleview-selectorhighlighter {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background: url("chrome://devtools/skin/images/open-inspector.svg") no-repeat 0 0;
  background-size: contain;
  cursor: pointer;
  -moz-context-properties: fill;
  fill: var(--theme-icon-dimmed-color);
}

.ruleview-selectorhighlighter:hover {
  fill: var(--theme-icon-color);
}

.ruleview-selectorhighlighter:active,
.ruleview-selectorhighlighter.highlighted {
  fill: var(--theme-icon-checked-color);
}

#ruleview-add-rule-button::before {
  background-image: url("chrome://devtools/skin/images/add.svg");
  background-size: 14px;
}

#pseudo-class-panel-toggle::before {
  content: ":hov";
}

#class-panel-toggle::before {
  content: ".cls";
}

#pseudo-class-panel-toggle::before,
#class-panel-toggle::before {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.flash-out {
  transition: background 1s;
}

.ruleview-matched {
  background-color: var(--theme-highlight-yellow);
}